<template>
	<view class="header-box">
		<!-- 定位+搜索组件 -->
		<view class="sear-loc-box flex-row-align-center">
			<view url="" class="loc-box flex-row-align-center">
				<view style="font-size: 14px">贵阳市</view>
				<view class="triangle-up"></view>
			</view>
			<view class="search-box">
				<uni-search-bar placeholder="请输入助教姓名" bg-color="#fff"></uni-search-bar>
			</view>
		</view>

		<!-- 分段器 -->
		<view class="segment-box">
			<uni-segmented-control :values="items" style-type="text"></uni-segmented-control>
		</view>
	</view>
</template>

<script setup lang="js">

defineProps({
	items: {
		type: Array,
		required: true
	},
})
</script>

<style scoped lang="scss">
.header-box {
	margin: 0 10px;
	padding: 10rpx;
	.sear-loc-box {
		// 定位
		.loc-box {
			position: relative;
			.triangle-up {
				width: 0px;
				height: 0px;
				border-radius: $uni-border-radius-lg;
				border: 7px solid black;
				border-color: black transparent transparent transparent;
				position: absolute;
				top: 50%;
				right: -36%;
				transform: translateY(-25%);
			}
		}
		.search-box {
			margin-left: 14px;
			flex-grow: 1;
		}
	}
}
</style>
